<!-- <script src="./new_file.js"></script> -->
<template>
	<view class="imagelp">
		<swiper circular indicator-dots indicater-color="#369" indicator-active-color="#F00" autoplay interval="3000">
			<swiper-item>
				<image src="../../static/indexhome.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/indexhome.png"></image>
			</swiper-item>
		</swiper>
		<view class="nav">
			<view class="one">
				<navigator url="/pages/escalation/escalation">
					<image src="../../static/repair.png"></image>
					<view class="logue">
						维修上报
					</view>
				</navigator>
			</view>
			<view class="two">
				<navigator url="/pages/drink/drink">
					<image src="../../static/class.png"></image>
					<view class="logue">
						餐饮保证
					</view>
				</navigator>
			</view>
			<view class="three">
				<navigator url="/pages/Visit/Visit">
					<image src="../../static/doctor.png"></image>
					<view class="logue">
						预约就诊
					</view>
				</navigator>
			</view>
			<view class="four">
				<navigator  open-type="switchTab" url="/pages/requairtwo/requairtwo">
				<image src="../../static/delicious.png"></image>
				<view class="logue">
					全部分类
				</view>
				</navigator>
			</view>
		</view>
		<view style="color:red;" class="down">
			<u-tabs :activeStyle="{
            color: '#5282F0',
            fontWeight: 'bold',
            transform: 'scale(1.15)'
        }" :inactiveStyle="{
            color: '#52A4F0',
            transform: 'scale(1)'
        }" :list="list2" @click="click"></u-tabs>
		</view>
		<view v-for="(item,index) in list">
			<view  v-for= "(item,index) in listtwo " :key="index" >
				<view class="letter">
					{{item.title}}
				</view>
				<view class="letters">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryId:'',
				list2: [{
					name: '通知',
				}, {
					name: '宣传', 
				}, {
					name: '餐饮公告'
				}],
				listtwo:[],
				list: [],
				list5: [{
					letter: '全国新型冠状病毒肺炎疫情最新情况',
					letters: '每一种思想都有影响力的种子感受世界的温度，年轻的你也能成为改变世界的动力百'
				}],
				list3: [{
					letter: '全国新型',
					letters: '每一种温度，年轻的你也能成为改变世界的动力百'
				}],
				list4: [{
					letter: '全国',
					letters: '每一种温度，年轻的'  
				}]

			};
		},        
		created() {
			//显示第一张
			this.list = this.list5
		},
		onLaunch() {
			
		},
		onLoad() {
			uni.request({
				url: 'http://192.168.1.56:9091/service/report/wxList',
				method: 'POST',
				params:{
					categoryId:this.list2
				},
				success: (res) => {
				this.listtwo = res.data.rows,
				this.categoryId = res.data.categoryId
					console.log(res);
					
				}
			})
		
		},
		methods: {
			click(e) {
				console.log(e.index);
				this.$nextTick(() => {
					if (e.index == 0  ) {
						this.list = this.list5
					} else if (e.index == 1) {
						this.list = this.list3
					} else if (e.index == 2) {
						this.list = this.list4
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.logue {
		font-size: 25rpx;

	}

	.box {
		position: absolute;
		top: 550rpx;
		left: 15rpx;
		// border: 1rpx solid #ccc;
		// height: 100%;

	}


	.clearfix::after {
		content: '';
		display: block;
		clear: both;
	}


	.letter {
		font-weight: bold;
	}

	.letters {
		margin-top: rpx;
		font-size: 25rpx;
	}

	.letterone {
		margin-top: 150rpx;
		// font-size: 25rpx;
		font-weight: bold;
	}

	.lettersone {
		margin-top: 210rpx;
		font-size: 25rpx;
	}

	.lettertwo {
		margin-top: 310rpx;
		// font-size: 25rpx;
		font-weight: bold;
	}

	.letterstwo {
		margin-top: 370rpx;
		font-size: 25rpx;
	}

	.box-one {
		font-weight: bold;
		color: #a4a4ff;
		position: relative;
	}

	.box-two {
		font-weight: bold;
		color: #a4a4ff;
	}

	.imagelp {
		margin-top: 100rpx;
		margin-left: 35rpx;
	}

	swiper {
		height: 350rpx;
	}

	image {
		width: 90vw;
		height: 350rpx;
	}

	.nav {
		display: flex;
		justify-content: space-evenly;
		margin-top: 38rpx;
		margin-right: 45rpx;


	}

	.nav image {
		width: 100rpx;
		height: 100rpx;
		border: none;
	}

	.one {
		border: 1px solid #ccc;
		background-color: #D976F4;
		width: 105rpx;
		height: 100rpx;
		border-radius: 20px;
	}

	.two {
		border: 1px solid #ccc;
		background-color: #9580F7;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20px;
		border: none;
	}

	.three {
		border: 1px solid #ccc;
		background-color: #63E1DD;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20px;
		border: none;
	}

	.four {
		border: 1px solid #ccc;
		background-color: #74BEFF;
		width: 100rpx;
		height: 100rpx;
		border-radius: 20px;
	}

	.tab-control {
		width: 700rpx;
		height: 450rpx;
		background: red;
		margin: 240rpx auto;
	}

	.tab-item {
		width: 465rpx;
		height: 60rpx;
	}

	.tab-item view {
		width: 155rpx;
		height: 60rpx;
		display: inline-block;
		color: #424242;
		font-size: 15rpx;
		font-weight: bold;
		text-align: center;
		line-height: 60rpx;
		cursor: pointer;
	}

	.active {
		background-color: #80cbc4;
	}

	.tab-content {
		width: 100%;
		height: 390rpx;
		background-color: #80cbc4;
		border: 1rpx solid transparent;
		box-sizing: border-box;
	}

	.tab-content view {
		width: 630rpx;
		height: 340rpx;
		background-color: brown;
		margin: 25rpx auto;
		display: none;
		padding: 30rpx;
		box-sizing: border-box;
		color: #ffffff;
		font-size: 16rpx;
		line-height: 25rpx;
		border-radius: 15rpx;
	}

	.down {
		margin-top: 50rpx;

	}
</style>
